<template>
   <div class="wrapper">
      <!-- header部分 -->
      <header>
        <p>商家列表</p>
      </header>
      
      <!-- 商家列表部分-->
      <ul class="business">
        <li v-for="item in businessArray" @click="toBusinessInfo(item.businessId)">
          <div class="business-img">
            <img :src="item.businessImg">
            <div class="business-img-quantity" v-show="item.quantity>0">{{item.quantity}}</div>
          </div>
          <div class="business-info">
            <h3>{{item.businessName}}</h3>
            <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
            <p>{{item.businessExplain}}</p>
          </div>
        </li>
      </ul>
            <!-- 底部菜单部分 -->
          <Footer></Footer>
   </div>
</template>

<script>
import Footer from '../components/Footer.vue'
export default {
    data(){
        return {
      // 获取到query中的参数
            orderTypeId:this.$route.query.orderTypeId,
            businessArray:[],
            user:{},
            cartArray:[]
        }
    },
  // vue中初始化的方法，自动调用
    created() {
        this.user = this.$getSessionStorage('user')
        // 利用axios根据orderTypeId查询商家的信息
        this.$axios.post('BusinessController/listBusinessByOrderTypeId',this.$qs.stringify({
            orderTypeId:this.orderTypeId
            })).then(response=>{
                this.businessArray = response.data;
                for(let item of this.businessArray){
                  item.quantity=0;
                }
                if(this.user!=null){
                  this.toquantity();
                }
                console.log(response.data);
            }).catch(error=>{
                console.log(error)
            })
    },
        // 
        
  methods: {
    toBusinessInfo(businessId) {
        //跳转页面
        this.$router.push({
        path:'/businessInfo',
        // query 参数 跳转页面的时候会把参数也传过去
        query: {
          businessId:businessId
        }
        })
    },
    toquantity(){
      
      this.$axios.post('CartController/listCart',this.$qs.stringify({
          userId:this.user.userId
        })).then(response=>{
					//如果请求成功，从后台会返回一个集合  cartArr[]
          console.log(response.data)
					this.cartArray = response.data;
          console.log(this.cartArray)

          for(let item of this.businessArray){
            for(let i = 0;i<this.cartArray.length;i++){
                // console.log(this.cartArray[i].quantity)

              if(item.businessId==this.cartArray[i].businessId){
                item.quantity+=this.cartArray[i].quantity; 
                console.log(this.cartArray[i].quantity)
                console.log(item.quantity)
              }
            }
          }
					this.businessArray.sort();
					console.log(response.data)
				}).catch(error=>{
					console.log(error)
				}).catch(error=>{
					console.log(error)
				});
    }
  },
    components:{
        Footer
    }
}
</script>

<style scoped>
    /****************** 总容器 ******************/
.wrapper{
  width: 100%;
  height: 100%;
}

/****************** header部分 ******************/
.wrapper header{
  width: 100%;
  height: 12vw;
  background-color: #0097FF;
  color: #fff;
  font-size: 4.8vw;
  
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  
  display: flex;
  justify-content: center;
  align-items: center;
}

/****************** 商家列表部分 ******************/
.wrapper .business{
  width: 100%;
  margin-top: 12vw;
  margin-bottom: 14vw;
}
.wrapper .business li{
  width: 100%;
  box-sizing: border-box;
  padding: 2.5vw;
  border-bottom: solid 1px #DDD;
  user-select: none;
  cursor: pointer;
  
  display: flex;
  align-items: center;
}
.wrapper .business li .business-img{
  /*这里设置为相当定位，成为business-img-quantity元素的父元素*/
  position: relative;
}
.wrapper .business li .business-img img{
  width: 20vw;
  height: 20vw;
}
.wrapper .business li .business-img .business-img-quantity{
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  /*设置成绝对定位，不占文档流空间*/
  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}
.wrapper .business li .business-info{
  margin-left: 3vw;
}
.wrapper .business li .business-info h3{
  font-size: 3.8vw;
  color: #555;
}
.wrapper .business li .business-info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
</style>



